{% extends 'public/layout.twig' %}
{% block body %}
<div class="layui-container" style="{{ style }}">
    <fieldset class="layui-elem-field">
        <legend>{{ title }}</legend>
        <div class="layui-field-box">
            <form id="form" class="layui-form" method="{{ method }}" action="{{ url }}">
                {% for item in controls %}
                    <div class="layui-form-item">
                        <label class="layui-form-label">{{ item.label }}</label>
                        <div class="layui-input-block">
                            {% if item.type in ['input', 'password'] %}
                                {# 输入框 #}
                                <input type="{{ item.type | replace({'input': 'text'}) }}" name="{{ item.name }}"
                                        {% if item.options.required %}
                                            required
                                            lay-verify="required"
                                        {% endif %}
                                       placeholder="{{ item.placeholder }}"
                                       autocomplete="off"
                                       value="{{ form[item.name] | default(item.options.value) }}"
                                       style="{{ item.options.style }}"
                                       class="layui-input"/>
                            {% elseif item.type == 'select' %}
                                {# 下拉框 #}
                                <select name="{{ item.name }}"
                                        placeholder="{{ item.placeholder }}"
                                        value="{{ form[item.name] | default(item.options.value) }}"
                                        style="{{ item.options.style }}">
                                    {% for value, text in item.options.options %}
                                        <option value="{{ value }}">{{ text }}</option>
                                    {% endfor %}
                                </select>
                            {% elseif item.type == 'radio' %}
                                {# 单选框 #}
                                {% for value, text in item.options.options %}
                                    <input type="radio"
                                           name="{{ item.name }}"
                                           value="{{ value }}"
                                           title="{{ text }}"
                                           style="{{ item.options.style }}"
                                            {{ value == form[item.name] | default(item.options.value) ? 'checked' : '' }}/>
                                {% endfor %}
                            {% elseif item.type == 'switch' %}
                                {# 切换按钮 #}
                                <input type="checkbox" name="{{ item.name }}"
                                       lay-skin="switch"
                                       {% if item.options.text %}
                                       lay-text="{{ item.options.text }}"
                                       {% endif %}
                                       value="{{ form[item.name] | default(item.options.value) }}"/>
                            {% elseif item.type == 'checkbox' %}
                                {# 多选框 #}
                                {% for value, text in item.options.options %}
                                    <input type="checkbox"
                                           name="{{ item.name }}"
                                           value="{{ value }}"
                                           title="{{ text }}"
                                           style="{{ item.options.style }}"
                                            {{ value == form[item.name] | default(item.options.value) ? 'checked' : '' }}/>
                                {% endfor %}
                            {% elseif item.type == 'textarea' %}
                                {# 文本域 #}
                                <textarea name="{{ item.name }}"
                                          placeholder="{{ item.placeholder }}"
                                          style="{{ item.options.style }}"
                                          class="layui-textarea">{{ form[item.name] | default(item.options.value) }}</textarea>
                            {% elseif item.type == 'checkimg' %}
                                {# 验证码 #}
                                <input name="{{ item.name }}" id="check_input" type="text" required lay-verify="required" class="layui-input"/>
                                <p style="margin: 8px 2px">
                                    <img src="{{ item.src }}" id="check_img" style="max-width: 100%"/>
                                </p>
                                <p>
                                    <a href="javascript:;" id="refrsh_check_code">看不清？刷新验证码</a>
                                </p>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="form">{{ submit_text }}</button>
                        {% if show_reset %}
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        {% endif %}
                    </div>
                </div>

            </form>
        </div>
    </fieldset>
</div>


<script>
    $(document).on('click', '#refrsh_check_code', function () {
        var img = $('#check_img')
        var src = img.attr('data-src')
        if (src) {
            img.attr('src', src + '?' + new Date().getTime())
        } else {
            src = img.attr('src')
            img.attr('data-src', src)
            img.attr('src', src + '?' + new Date().getTime())
        }
        var input = $('#check_input')
        input.val('')
        input.focus()
    });
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;

        form.on('submit(form)', function (data) {
            console.log(data)

            return false;
        });


    });
</script>

{% endblock %}
